<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
</head>
<body>
    <!-- 路由的传参
        1.利用touter-link 传参
        通过方法切换路由之后，地址栏上是 http://127.0.0:5500/vue_router3.html#/news/001
        获取这个参数：$route.params.id获取

         2.

       可以通过JS来实现路由的跳转
        $router.push()方法来实现路由的跳转 
        $router.go()
    -->
    <div id="box">
        <!-- 创建一些跳转的按钮 通过js跳转 -->
        <div id="class">
        
            <input type="button" value="跳转的首页" @click="fn1()">
            <input type="button" value="跳转到新闻页" @click="fn2()">
            <input type="button" value="跳转到用户页" @click="fn3()">
            <input type="button" value="前进一叶" @click="fn4()">
            <input type="button" value="前进一页" @click="fn5()">
            <input type="button" value="后退一叶" @click="fn6()">
            <input type="button" value="后退一页" @click="fn7()">
        </div>
        <!-- 设定一个路由的内容在touter-view中 -->
        <router-view></router-view>
    </div>



    <script>
//创建路由
const router =new VueRouter({
    routes:[
        {
            path :'/index/:ip',
            name:'index',//路由的名称，可选的属性，定义之后可以用这个name来实现跳转
            component:{//路由显示的组件
                    template:'<div>首页:{{$route.params.ip}}</div>',//组件的模板
            }
        },
        {
            path :'/news/:id',
            name:'news',
            component:{//路由显示的组件
                    template:'<div>新闻:{{$route.params.id}}</div>',
            }
            

        },
        {
            path:'/user',
            name:'user',
            component:{
                template:'<div>用户:{{$route.query.u}}</div>',
            }
        }
    ]
})


let vm =new Vue({
    el:'#box',
    data:{
       
    },
    router,
    methods: {
        fn1(){
            //通过路由的名称进行跳转 用replace()
            this.$router.replace({name:'index',params:{ip:Math.random()}})
        },
        fn2(){
            //我们可以直接跳转路由地址，参数可以直接写在路径中 ES6中的模板字符串`` (常用)
            this.$router.push(`/news/${(Math.random())}`)
        },
        fn3(){
            //通过路由地址进行跳转，可以配置query参数
            this.$router.push({
                path:'/user',
                query:{
                    u:Math.random(),
                }
            })
        },
        fn4(){
            console.log(this.$router),
            this.$router.go(1)//整数前进 负数后退
        },
        fn5(){
            this.$router.forward()
        },
        fn6(){
            this.$router.go(-1)
        },
        fn7(){
            this.$router.back()
        }
        
    },
})



        // 定义路由的组件
//         const Home = {template:'#home'}
//         const News = {template:'#news'}
//         const Login = {template:'#login'}
//         const Reg = {template:'#reg'}
//         const NewsDetail = {template:'#NewsDetail'}
//    //定义路由
//    const routes = [
//             {path:'/',redirect:'/home'},
//             {
//                 path:'/home',
//                 component:Home,
//                 children:[
//                     {path:'/home/login',component:Login},
//                     {path:'/home/reg',component:Reg}
//                 ]
//             },
//             {path:'/news',component:News},
//             {path:'/news/:id',component:NewsDetail}
//         ]

//         //创建vueRouter的实例
//         const router = new VueRouter({
//             routes
//         })

//         //创建vue的实例
//         var vm = new Vue({
//             el:'#box',
//             data:{},
//             router
//         })
    </script>

    

    </body>
    </html>